<template>
  <div>
    <el-container>
      <el-aside width="200px" style="background-color:rgb(32,87,113);height: calc(100vh)">
        <div style="width: 180px;padding: 10px;">
          <img src="@/assets/logo.png" alt="company logo"
               style="width: 80px;">
          <span
              style="color:#f7f9f9;font-size:x-large;width:70px;float: right;font-weight: bold;margin-right: 30px">建工<br>集团</span>
        </div>

        <el-menu :default-active="pageMenu" class="el-menu-vertical-demo"
                 @select="selectMenu"
                 unique-opened
                 :router="true" background-color="rgb(32,87,113)" text-color="white">
          <template v-for="route in menuList">
            <template v-if="route.children && route.children.length > 0">
              <el-submenu :index="route.menuId+''" :key="route.menuId">
                <template slot="title"><i :class="route.icon"></i>{{ route.menuName }}</template>
                <el-menu-item v-for="child in route.children" :index="child.component" :key="child.menuId">
                  <i :class="child.icon"></i>
                  {{ child.menuName }}
                </el-menu-item>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="route.component" :key="route.menuId">
                <i :class="route.icon"></i>
                {{ route.menuName }}
              </el-menu-item>
            </template>
          </template>
        </el-menu>

      </el-aside>
      <el-container style="background-color: #e9ecf3">
        <el-header style="color: white; line-height: 60px;background-color: rgb(187,218,233)">
          <el-dropdown style="float: right; margin-right: 20px;" @command="handleCommand">
            <span class="el-dropdown-link">
              <img v-if="$store.state.user.avatar" :src="'http://localhost:8080/'+$store.state.user.avatar"
                   alt="user avatar"
                   style="width: 40px; height: 40px; border-radius: 50%; vertical-align: middle;">
              <i class="el-icon-arrow-down el-icon--right">{{ $store.state.user.username }}</i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              <el-dropdown-item command="updateUser">修改个人信息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main style="height: calc(100vh - 150px);margin: 10px;padding: 0">
          <router-view class="main-card"/>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="用户编辑" :visible.sync="dialogFormVisible">
      <UserEdit v-if="dialogFormVisible" :id="editId" @close-dialog="closeDialog"></UserEdit>
    </el-dialog>
  </div>
</template>

<script>

import request from "@/utils/request";
import UserEdit from "@/components/pages/UserEdit";
import buildTree from "@/utils/buildTree";

export default {
  name: "IndexHello",
  components: {UserEdit},
  async created() {
    let user = await request("userInfo", "post")
    let authoritiesList = [];
    user.authorities.forEach(o => {
      authoritiesList.push(o.authority)
    })

    this.$store.state.authorities = authoritiesList;
    this.$store.state.user = user;
    let menuList = await request("menuInfo", "post")
    menuList=menuList.filter(o=>{return o.status==="0"})
    let tree = buildTree(menuList, 0)
    tree.forEach(t => {
      this.menuList.push(t)
    })
    // console.info(tree)
    this.pageMenu = this.$route.fullPath;
  },
  methods: {
    closeDialog() {
      this.dialogFormVisible = false
    },
    selectMenu(m, o) {
      // console.info(m)
      this.pageMenu = m;
      console.info(o)
    },
    //退出登录
    handleCommand(command) {
      if (command === 'logout') {
        request("logoutUser", "post").then(() => {
          this.$router.push("/login")
        })
      }
      if (command === 'updateUser') {
        this.editId = this.$store.state.user.userId
        this.dialogFormVisible = true
      }
    },


  },
  data() {
    return {
      editId: 0,
      dialogFormVisible: false,
      menuList: [
        {menuName: "首页", component: "/index/index", icon: "el-icon-location"},
      ],
      pageMenu: "",
    };
  },

};
</script>
<style scoped>
.el-menu {
  border-right: none;
}

.is-active {
  color: #91d7ed;
}

.main-card {
  background: #fdfdfe;
  padding: 20px;
  margin: 10px;
}
</style>